
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/core/model/map_all_device_model.dart';
import 'package:syn_4s/ui/shared/app_theme.dart';
import 'package:syn_4s/ui/widgets/dialog_title.dart';
import 'package:syn_4s/ui/widgets/google_map_item.dart';
import 'package:syn_4s/ui/widgets/shadow_container.dart';

class GoogleMapLockDialog extends StatelessWidget {
  final String title;
  final MapAllDeviceModel? data;

  const GoogleMapLockDialog(this.title, this.data, {super.key});

  @override
  Widget build(BuildContext context) {
    return ShadowContainer(
      padding: EdgeInsets.all(8.px),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          DialogTitle(title, ""),
          buildLockInfo(),
          GoogleMapItem(data)
        ],
      ),
    );
  }

  Widget buildLockInfo(){
    return Container(
      margin: EdgeInsets.only(top: 18.px, left: 6, right: 6.px),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Stack(
            children: [
              SvgPicture.asset("assets/images/map_lock.svg", width: 80.px, height: 80.px,),
              Positioned(
                  bottom: 2.px,
                  right: 3.px,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      setText("50", color: AppTheme.orangeColor, size: 26.px, fontWeight: FontWeight.w900),
                      setText("%", color: AppTheme.orangeColor, size: 14.px)
                    ],
                  )
              )
            ],
          ),
          SizedBox(width: 10.px),
          Expanded(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      setText("${data?.deviceName}", size: 22.px, fontWeight: FontWeight.w900, color: AppTheme.orangeColor),
                      setText("ID:${data?.sn}", size: 14.px),
                      Row(
                        children: [
                          buildOval(),
                          SizedBox(width: 3.px),
                          setText("${data?.statusName}", color: Colors.green, size: 14.px),
                        ],
                      )
                    ],
                  ),
                  Row(
                    children: [
                      setText("Lock State:", size: 14.px),
                      setText("${data?.lockStatusName}", size: 14.px, color: AppTheme.orangeColor)
                    ],
                  ),
                  SizedBox(height: 6.px),
                  Text("Address:${data?.address}", style: TextStyle(fontSize: 14.px, color: AppTheme.textColor))
                ],
              )
          ),
        ],
      ),
    );
  }

  Widget buildOval() {
    return Container(
      height: 8.px,
      width: 8.px,
      decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.all(Radius.circular(6.px))),
    );
  }

  Widget setText(String text,{double? size, FontWeight? fontWeight, Color color = AppTheme.textColor}){
    return Text(
      text,
      style: TextStyle(
          fontSize: size,
          fontWeight: fontWeight,
          color: color
      ),
      overflow: TextOverflow.ellipsis,
      maxLines: 1,
    );
  }
}
